<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap-4.6.0-dist/css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-4.6.0-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.children{
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
			}
			
			div>img{
				width: 100%;
			}
			div{
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
		  <a class="navbar-brand" href="#">Navbar</a>
		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
		    <span class="navbar-toggler-icon"></span>
		  </button>
		  <div class="collapse navbar-collapse" id="collapsibleNavbar">
		    <ul class="navbar-nav">
		      <li class="nav-item">
		        <a class="nav-link" href="#">Link</a>
		      </li>
		      <li class="nav-item">
		        <a class="nav-link" href="#">Link</a>
		      </li>
		      <li class="nav-item">
		        <a class="nav-link" href="#">Link</a>
		      </li>    
		    </ul>
		  </div>  
		</nav>
		<div class=" layui-row" style="margin-top: 50px;">
			<!--
				layui-col 表示我是列
				md指定的屏幕尺寸(见说明)
				5是指占据5/12比例
			-->
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p style="text-align: center;">娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children  layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
			<div class="children   layui-col-sm6 layui-col-md3 layui-col-lg2">
				<img src="img/shop.jpg" />
				<p>娅丽达咖色休闲小西装外套女秋装2021</p>
				<span>¥ 389.00</span>
			</div>
		</div>

	</body>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</html>
